@charset "utf-8";

@import "reset";

$fontsize:40;

@function r($px){
    @return $px/$fontsize * 1rem;
}
*{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
}

html,body{
    width: 100%;
    height: 100%;
}
.web{
    width: 100%;
    height: 100%;
    position: relative;
}
header{
    width: 100%;
    height: r(150);
    position: absolute;
    top: 0;
    background: white;
    .logo{
        width:r(124);
        height:r(124);
        margin-top:r(20);
        margin-left:r(16);
        img{
            width: 100%;
            height: 100%;
}
}
    .searchBar{
    box-sizing: border-box;
    height:r(50);
    width:r(266);
    border: 1px solid #ff9344;
    border-radius:r(50);
    margin: r(52) auto 0;
    padding: 0 r(12);
    input{
        width:r(195);
        height: 100%;
        border: none;
        vertical-align: top;
        font-size:r(24);
        background: transparent;
        text-indent:r(10);
    }
    i{
            font-size:r(28);
            color: #ff9344;
            vertical-align:middle;
        }
}  
    .selectBar{
    width:r(158);
    height:r(54);
    margin-top:r(48);
    margin-right: r(22);
    border: 1px solid #ff9344;
    box-sizing: border-box;
    line-height: r(54);
    select{
            width:r(158);
            border: none;
            text-indent:r(20);
            line-height: r(54);
            vertical-align: top;
            outline: none;
            appearance: none;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: url(../img/index/icon-1.png) no-repeat right 5px center;
            background-size: r(30) r(16);
        }
} 
}

section{
    width: 100%;
    position: absolute;
    top: r(150);
    bottom:r(138);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .swiper-container{
        width: 100%;
        height:r(250);
         overflow: hidden;
        .swiper-slide{
            width: 100%;
            height: 100%;
        img{
            width: 100%;
            height: 100%;
        }
        }
    }
    .tuangou{
        width: 100%;
        height: r(322);
        .tuangou-head{
            width: 100%;
            height:r(94);
            .tuangou-img{
                width: r(56);
                height:r(54);
                img{
                    width: 100%;
                    height: 100%;
                    margin:r(34) r(34) r(0) r(8);
                }
            }
            .tuangou-font{
                height:r(94);  
                font-size: r(30);
                margin-left: r(70);
                padding-top:r(46);
            }
            .tuangou-span{
                padding-top: r(40);
                margin-right:r(20);
                font-size:r(24);
                color: black;
                i{  
                    padding-top: r(6);
                    font-size:r(36);
                    color: #ff9344;
                }
            }
        }
        .tuangou-li{
            width: 100%;
            height: r(230);
            ul{
                width: 100%;
            li{
                width:r(241);
                height:r(94);
                float: left;
                margin-top:r(10);
                text-align: center;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            li:nth-child(3){
                margin-bottom: r(0);
                margin-left: r(76);
            }
            li:first-child{
                margin-bottom:r(18);
                margin-left: r(76);
            }
            li:nth-child(2){
                margin-bottom:r(18);
                margin-left: r(102);
            }
            li:nth-child(4){
                margin-bottom: r(0);
                margin-left: r(102);
            }
            }
        }
    }
     .like{
        width: 100%;
        height:r(474);
        .like-head{
            width: 100%;
            height:r(94);
            .like-img{
                width:r(56);
                height:r(54);
                img{
                    width: 100%;
                    height: 100%;
                    margin:r(34) r(34) 0 r(8);
                }
            }
            .like-font{
                height:r(94);  
                font-size: r(30);
                margin-left: r(70);
                padding-top: r(46);
            }
            .like-span{
                padding-top: r(40);
                margin-right:r(20);
                font-size:r(24);
                color: black;
                i{  
                    padding-top: r(6);
                    font-size: r(36);
                    color: #ff9344;
                }
            }
        }
        .like-shop{
            width: 100%;
            height:r(389);
            .like-shop-img1{
                width:r(212);
                height:r(164);
                img{
                    margin-top:r(22);
                    margin-left:r(20);
                    width: 100%;
                    height: 100%;
                }
            }
            .like-much{
                margin-right: r(14);
                p{
                    margin-top:r(38);
                    font-size:r(22);
                    color: #494949;
                    text-align: right;
                }
                h4{
                    margin-top:r(84);
                   font-size: r(22);
                    color: #494949; 
                    font-weight: normal;
                }
            }
             .like-shop-font{
                 width: r(270);
                 margin-left:r(260);
                 h1{
                     padding-top:r(38);
                     font-size:r(30);
                     font-weight: normal;
                 }
                 h3{
                     margin-top: r(18);
                     font-size: r(22);
                     color: #494949;
                     font-weight: normal;
                 }
                 p{
                     margin-top:r(20);
                     font-size: r(32);
                     color: #ff9344;
                 }
                 
             }   
            
        }
        
        }
}
footer{
    width: 100%;
    height:r(136);
    background: white;
    position: absolute;
    bottom:0;
    a{
        color: #000000;
        .iconfont{
        color: #FFFFFF;
        font-size: r(60);
        -webkit-text-stroke: 1px red;
    } 
    }
    ul li{
        width: 25%;
        height: 100%;
        float: left;
        text-align: center;
        margin-top: r(16);
        &.active .iconfont{
            color: #FF9344;
        }
        p{
            font-size: r(26);
        }
           &:hover .iconfont{
               color: #eb883f;
               text-shadow: r(6) r(6) r(4) red;
               transition: 3s;
           }
    }
    
}
